
 
 
 
 <!DOCTYPE html>
<html>
        <head>  
                <title>Web OPM</title>

                <link rel="stylesheet" href="css/bootstrap.css" />
                <link rel="stylesheet" href="css/bootstrap-responsive.css" />
                <link rel="stylesheet" href="css/jquery-ui.css" />
                <link rel="stylesheet" href="css/editor.css" />
                
                <link rel="icon" type="image/png" href="img/logo.png" />
                
                <meta name="application-name" content="Web OPM" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="OPM conceptual modeling tool simulation" />
        <meta name="author" content="Technion" />
        <meta charset="utf-8">
		
		
		<!--     FACEBOOK LOGIN Javascript SDK Loading -->
		      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : '506900152659881', // App ID
            channelUrl : '//http://127.0.0.1:8080/channel.html', // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
          });
          // Additional initialization code here
        };
        // Load the SDK Asynchronously
        (function(d){
           var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
           if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           ref.parentNode.insertBefore(js, ref);
         }(document));
         FB.api('/me', function(response) {
        	alert('Your name is ' + response.name);
        	});
        </script>
	  
	
		
		
		
		
        </head>
        
        <script type="text/javascript">
                var _gaq = _gaq || [];
                _gaq.push(['_setAccount', 'UA-29544788-1']);
                _gaq.push(['_trackPageview']);

                (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                })();
        </script>
        
        <body onload='channelOpen()'>
                <div class="navbar navbar-fixed-top">
                        <div class="navbar-inner">
                                <div class="container-fluid">
                                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </a>
                                <a class="brand" href="#" style="color: LimeGreen">Web OPM</a>
                                <div class="nav-collapse">
                                        <ul class="nav">
                                                <li class="dropdown">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="#">New Model...</a></li>
                                                                <li><a href="#">Open Model...</a></li>
                                                                <li><a href="#">Load Model from Repository</a></li>
                                                                <li><a href="#">Close Model</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Save Model...</a></li>
                                                                <li><a href="#">Save As...</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Print</a></li>
                                                                <li><a href="#">Properties</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Login...</a></li>
                                                                <li><a href="#">Sign up...</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Exit</a></li>
                                                        </ul>
                                                </li>
                                                <li class="divider-vertical"></li>
                                                <li class="dropdown">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="#">Undo</a></li>
                                                                <li><a href="#">Redo</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Cut</a></li>
                                                                <li><a href="#">Copy</a></li>
                                                                <li><a href="#">Paste</a></li>
                                                                <li><a href="#">Delete</a></li>
                                                        </ul>
                                                </li>
                                                <li class="divider-vertical"></li>
                                                <li class="dropdown">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="#">Help...</a></li>
                                                                <li><a href="#">F.A.Q.</a></li>
                                                                <li><a href="#">OPM Tutorial</a></li>
                                                                <li><a href="#">Examples</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">About</a></li>
                                                        </ul>
                                                </li>
                                        </ul>
                                        <form class="navbar-search pull-left">
                                                        <input type="text" class="search-query" placeholder="Search">
                                                </form>
                                                <div class="btn-group pull-right">
                                                        <a class="btn" href="#"><i class="icon-user"></i> User</a>
                                                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                                                        <ul class="dropdown-menu">
                                                                <li><a href="#"><i class="icon-inbox"></i> Inbox</a></li>
                                                                <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#"><i class="icon-off"></i> Sign Out</a></li>
                                                        </ul>
                                                </div>
                                </div>                  
                                </div>
                        </div>
                </div>
                
                <header class="header">
                
                        <div class="modal hide" id="model-rename">
                                <div class="modal-header">
                                        <a class="close" data-dismiss="modal">&times;</a>
                                        <h2>Rename the Model</h2>
                                </div>
                                <div class="model-body">
                                        <p>Please, enter a new name of the model:</p>
                                        <form>
                                                <input type="text"></input>
                                        </form>
                                </div>
                                <div class="modal-footer">
                                        <a class="btn" data-dismiss="modal">Cancel</a>
                                        <a class="btn btn-success">Apply</a>
                                </div>
                        </div>
                        
                        <table class="social">
                                <tr>
                                        <td><h2><a id="model-name" data-toggle="modal" rel="tooltip" title="Click to Rename" onclick="rename();">New Model</a></h2></td>
                                        <td><h2 style="color: grey">:</h2></td>
                                        <td><h2 style="color: grey">System Diagram</h2></td>
                                        <td style="width: 59%"></td> 
										<!--Facebook login button-->
										<td><div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="email">Login Web-OPM with Facebook</div></td>	
                                        <td><a href="#"><img src="img/glyphicons/glyphicons_346_google_plus.png" alt="google plus"/></a></td>
                                        <td><a href="#"><img src="img/glyphicons/glyphicons_320_facebook.png" alt="facebook"/></a></td>                                                                                                 
                                        <td><a href="#"><img src="img/glyphicons/glyphicons_321_twitter_t.png" alt="twitter"/></a></td>
                                        <td><a href="#"><img src="img/glyphicons/glyphicons_337_linked_in.png" alt="linked in"/></a></td>
                                        <td><a href="#"><img src="img/glyphicons/glyphicons_327_rss.png" alt="rss feed"/></a></td>
                                </tr>
                        </table>
                                                        
                </header>

                <div class="subnav subnav-fixed">
                        <ul class="nav nav-pills">
                                <li><a href="#" rel="tooltip" title="Create New Model"><i class="icon-file"></i></a></li>
                                <li><a href="#" rel="tooltip" title="Open Model"><i class="icon-folder-open"></i></a></li>
                                <li><a href="#" rel="tooltip" title="Print Current Model"><i class="icon-print"></i></a></li>
                                <li><a href="#" rel="tooltip" title="Download Current Model"><i class="icon-download-alt"></i></a></li>
                                <li class="divider-vertical"></li>
                                <li><a href="#"><i class="icon-font"></i></a></li>
                                <li><a href="#"><i class="icon-bold"></i></a></li>
                                <li><a href="#"><i class="icon-italic"></i></a></li>
                                <li class="divider-vertical"></li>
                                <li><a href="#"><i class="icon-align-left"></i></a></li>
                                <li><a href="#"><i class="icon-align-center"></i></a></li>
                                <li><a href="#"><i class="icon-align-right"></i></a></li>
                                <li><a href="#"><i class="icon-align-justify"></i></a></li>
                                <li class="divider-vertical"></li>
                                <li><a href="#" rel="tooltip" title="Zoom In" onclick="diagramZoom(1.25)"><i class="icon-zoom-in"></i></a></li>
                                <li><a href="#" rel="tooltip" title="Zoom Out" onclick="diagramZoom(0.8)"><i class="icon-zoom-out"></i></a></li>
                                <li><a href="#"><i class="icon-cog"></i></a></li>
                        </ul>
                                
                </div>
                
                <div id="opl-panel"></div>
                <p class="slide">
                        <h6><a href="#" class="btn btn-inverse btn-slide" rel="tooltip" title="Click to show OPL">OPL <i class="icon-resize-vertical icon-white"></i></a></h6>
                </p>
                
                <div id="container-model" class="container-fluid" style="margin-top: 20px;">
                        <div class="row" style="height: 500px;">
                                <div class="span1 drag">
                                        <div class="well sidebar-nav" style="padding: 0px;">
                                        <table style="">
                                                <tr><th colspan="2"><h6>Things</h6></th></tr>
                                                <tr><td colspan="2"><a href="#" rel="tooltip" title="Object" onclick="addObject();"><img src="img/glyphicons/glyphicons_094_vector_path_square.png" alt="object"/></a></td></tr>
                                                <tr><td colspan="2"><a href="#" rel="tooltip" title="Process" onclick="addProcess();"><img src="img/glyphicons/glyphicons_095_vector_path_circle.png" alt="process"/></a></td></tr>
                                                <tr><td colspan="2"><a href="#" rel="tooltip" title="State" onclick="addState();"><img src="img/glyphicons/glyphicons_094_vector_path_square.png" alt="state"/></a></td></tr>
                                                <tr><td colspan="2"></td></tr>
                                                <tr><th colspan="2"><h6>Links</h6></th></tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td><i class="icon-qrcode"></i></td>
                                                </tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td><i class="icon-qrcode"></i></td>
                                                </tr>
                                                <tr>
                                                        <td><a href="#" rel="tooltip" title="Result/Consumption Link" onclick="turnLinkOn('rcl')"><i class="icon-play"></i></a></td>
                                                        <td><i class="icon-qrcode"></i></td>
                                                </tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td><a href="#" rel="tooltip" title="Unidirectional Relation" onclick="turnLinkOn('udr');"><i class="icon-arrow-right"></i></a></td>
                                                </tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td><i class="icon-qrcode"></i></td>
                                                </tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td></td>
                                                </tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td></td>
                                                </tr>
                                                <tr>
                                                        <td><i class="icon-qrcode"></i></td>
                                                        <td></td>
                                                </tr>           
                                        </table>
                                        </div>
                                </div>

                                <div class="span2 drag">
                                        <div class="well resize">
                                                <h6>OPD Tree<a href="#" class="close" onclick="$('.span2').css('display', 'none');">&times;</a></h6>
                                        </div>
                                </div>

                                <div class="canvas">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="100%" height="100%">
                                                <def>
                                                        <!-- List of markers which stand for links endings -->
                                                        <marker id="udr" viewBox="-20 -10 20 20" markerUnits="strokeWidth" refX="0" refY="0" markerWidth="10" markerHeight="10" orient="auto">
                                                                <path stroke="DimGrey" stroke-width="2" fill="none" d="M -15,-5 L 0,0 -15,5" />
                                                        </marker>
              <marker id="rcl" viewBox="-20 -10 20 20" markerUnits="strokeWidth" refX="0" refY="0" markerWidth="10" markerHeight="10" orient="auto">
                <path stroke="DimGrey" stroke-width="2" fill="DimGrey" d="M -15,-5 L 0,0 -15,5 z" />
              </marker>
                                                </def>
                                        </svg>
                                        
                                </div>
                                
                        </div>
                        
                        <div class="pagination pagination-centered">
                                <ul>
                                        <li><a href="#">&larr; Prev</a></li>
                                        <li class="active"><a href="#">SD</a></li>
                                        <li><a href="#">Next &rarr;</a></li>
                                </ul>
                        </div>
                        
                        <hr>
                </div>
        </div>
                
        <footer class="footer">
                <p>Web OPM: online case tool for <a href="//en.wikipedia.org/wiki/Object_Process_Methodology" target="_blank">Object-Process Methodology</a></p>
                <p>Copyright &copy 2012 Israel Institute of Technology - <a href="//www.technion.ac.il" target="_blank">Technion</a></p>
                <p style="margin-bottom: 20px;">The code is licensed under <a href="//www.gnu.org/licenses/gpl-2.0.html" target="_blank">GNU General Public License, v2</a></p>
                <p>Version 1.3.0 released on 23/06/2012</p>             
        </footer>
        

<!-- Placed at the end of the document so to increase loading the page -->      
        <!-- 3rd party Libraries -->
                <!-- jQuery -->
                <script src="js/jquery.min.js"></script>
                <script src="js/jquery-ui.min.js"></script>
                <!-- Bootstrap -->
                <script src="js/bootstrap.js"></script>
<!--    <script src="js/bootstrap-alert.js"></script>                   -->
                <script src="js/bootstrap-button.js"></script>
<!--    <script src="js/bootstrap-carousel.js"></script>                        -->
<!--    <script src="js/bootstrap-collapse.js"></script>                        -->
                <script src="js/bootstrap-dropdown.js"></script>
                <script src="js/bootstrap-modal.js"></script>
<!--    <script src="js/bootstrap-popover.js"></script>                 -->
<!--    <script src="js/bootstrap-scrollspy.js"></script>               -->
<!--    <script src="js/bootstrap-tab.js"></script>                             -->
                <script src="js/bootstrap-tooltip.js"></script>
<!--    <script src="js/bootstrap-transition.js"></script>              -->
<!--    <script src="js/bootstrap-typeahead.js"></script>               -->
        
    <!-- JSON -->
    <script src="js/json/JSON.js"></script>
    <script src="js/json/JSONError.js"></script>
    <script src="js/json/JSONRequestError.js"></script>
    <script src="js/json/JSONRequest.js"></script>

    <!-- Google -->
                <script src="/_ah/channel/jsapi"></script>
        
         <!-- Custom JS -->
                
    <script src="js/editor-comm.js"></script>
    <script src="js/editor-comm-request.js"></script>
    <script src="js/editor-comm-channel.js"></script>
        
                <script src="js/editor-svg-class.js"></script>
                <script src="js/editor-svg-util.js"></script>
                <script src="js/editor-svg.js"></script>
                
    <script src="js/editor-opm-class.js"></script>  
    <script src="js/editor-opm.js"></script>  
    <script src="js/editor.js"></script>  
        </body>
</html>